<template>
	<my-main title="订单管理"  isBack :table="table" @search="getTbody" @infoFun="infoFun">
		<template #tableTbody="{ tbody }">
			<my-list :options="tbody" @click="clickRow">
				<template #item="{ row }">
					<view class="p-16 bg-color-white radius-8">
						<view class="flex-between-center">
							<view class="f-32 fwb">{{ row.OrderName }}</view>
						</view>
						<view class="flex-start-center m-y-8">
							<my-tabs v-model="row.OrderStatus" :options="options.OrderStatus"></my-tabs>
							<my-tabs v-model="row.InvoiceStatus" :options="options.InvoiceStatus"></my-tabs>
							<my-tabs v-model="row.OrderType" :options="options.OrderType"></my-tabs>
							<my-tabs v-model="row.PayStatus" :options="options.PayStatus"></my-tabs>
						</view>
						<view class="f-24 text-color-text m-t-12">{{ `订单单号 ：${row.OrderCode || '--'}` }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `客户名称 ：${row.ClientName || '--'}` }}</view>
						<view class="f-24 text-color-text m-t-12">{{ `发票号码 ：${row.InvoiceNum || '--'}` }}</view>
						<view class="flex bg-color-bg m-t-12 p-16 radius-8">
							<view class="flexAuto text-center flex-c-start-center">
								<view class="countTitle">订单金额</view>
								<view class="countNumber">{{ row.OrderAmt }}</view>
							</view>
							<view class="line"></view>
							<view class="flexAuto flex-c-start-center">
								<view class="countTitle">收款金额</view>
								<view class="countNumber">{{ row.PayAmt }}</view>
							</view>
							<view class="line"></view>
							<view class="flexAuto flex-c-start-center">
								<view class="countTitle">开票金额</view>
								<view class="countNumber">{{ row.BillingAmt }}</view>
							</view>
						</view>
						<view class="flex-between-center m-t-12 f-24 text-color-text">
							<text>{{ `创建人：${row.ValetPerson || ''}` }}</text>
							<text>{{ `创建时间：${row.CrtTime || ''}` }}</text>
						</view>
					</view>
				</template>
			</my-list>
		</template>
	</my-main>
</template>

<script lang="uts" setup>
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage,formatDate,getTimeAgo,proxy } = useVue()
//
const scanResult=ref('')
// 表单数据
const formData:any = reactive({
})
const options=reactive({
	//订单状态
	OrderStatus:[
		{
		  label: '待审核',
		  value: '待审核',
		  type: 'info',
		},
		{
		  label: '待生产',
		  value: '待生产',
		  type: 'primary',
		},
		{
		  label: '委托制作',
		  value: '委托制作',
		  type: 'primary',
		},
		{
		  label: '生产中',
		  value: '生产中',
		  type: 'warning',
		},
		{
		  label: '完工',
		  value: '完工',
		  type: 'success',
		},
		{
		  label: '结单',
		  value: '结单',
		  type: 'success',
		},
		{
		  label: '待退款',
		  value: '待退款',
		  type: 'success',
		},
		{
		  label: '已退款',
		  value: '已退款',
		  type: 'success',
		},
		{
		  label: '作废',
		  value: '作废',
		  type: 'warning',
		},
	],
	//开票状态
	InvoiceStatus:[
		{
		  label: '待开票',
		  value: '待开票',
		  type: 'info',
		},
		{
		  label: '开票完成',
		  value: '开票完成',
		  type: 'success',
		},
		{
		  label: '少开票',
		  value: '少开票',
		  type: 'warning',
		},
		{
		  label: '多开票',
		  value: '多开票',
		  type: 'warning',
		},
	],
	//订单类型
	OrderType:[
		{
		  label: '电脑',
		  value: '1',
		  type: 'primary',
		},
		{
		  label: '手机',
		  value: '2',
		  type: 'success',
		},
	],
	//收款状态
	PayStatus:[
		{
		  label: '待付款',
		  value: '待付款',
		  type: 'info',
		},
		{
		  label: '少收货款',
		  value: '少收货款',
		  type: 'warning',
		},
		{
		  label: '挂账',
		  value: '挂账',
		  type: 'primary',
		},
		{
		  label: '多收货款',
		  value: '多收款',
		  type: 'success',
		},
		{
		  label: '货款收讫',
		  value: '货款收讫',
		  type: 'success',
		},
	],
})
// 表单数据
const table:any = reactive({
	loading: false,//数据加载
	search:{
		PageLimit: 10,
		PageIndex: 1,
		Count: 0,
		ClientName: "",
		ClientCode: "",
		OrderStatus: "",
		PayStatus: "",
		InvoiceStatus: [],
		OrderStatusV2: [],
		BeginDate:getTimeAgo(3,'month'),
		EndDate:formatDate(),
	},
	searchSet:{
		searchKey:'ClientName',
		options:[
			{
				label: '客户名称',
				prop: 'ClientName',
				type:'input',
			},
			{
				label: '订单单号',
				prop: 'OrderCode',
				type:'input',
			},
			{
				label: '单据状态',
				prop: 'OrderStatusV2',
				type:'tabs',
				options:options.OrderStatus,
			},
			{
				label: '付款状态',
				prop: 'PayStatus',
				type:'tabs',
				options:options.PayStatus,
			},
			{
				label: '开票状态',
				prop: 'InvoiceStatus',
				type:'tabs',
				options:options.InvoiceStatus,
			},
			{
				label: '日期范围',
				type:'days',
				start:'BeginDate',
				end:'EndDate',
			},
		]
	},
	tbody:[],
})
//搜索
const clickRow = (row?:any) => {
	console.log(row);
	goToPage('/order/order/details',{
		ClientCode:row.ClientCode,
		OrderCode:row.OrderCode,
	})
}
//搜索
const getTbody = (scrollSet?:any) => {
	table.loading=true
	http.request({
		url: 'api/OrderMan/GetOrderList',
		data: table.search,
		isNotToken: true,
		success: (res : any) => {
			table.tbody.push(...res.orders)
			table.search.Count = res.Count
			if(table.summary?.length>0){
				table.summary.forEach((el:any)=>{
					el.value=res[el.prop]
				})
			}
			_scrollSet()
		},
		fail:()=>{
			_scrollSet()
		}
	})
	function _scrollSet(){
		table.loading=false
		console.log(scrollSet);
		if(scrollSet){
			scrollSet.triggered=false
		}
	}
}
//初始运行
const infoFun = () => {
	getTbody()
}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.class-name {
	font-weight: bold;
}
</style>
